<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        html{
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0px;

            /*设置body为弹性盒子*/
            display: flex;
            /*设置body子元素<main>竖直方向和水平方向居中*/
            align-items: center;
            justify-content: center;

            /*文本水平方向居中*/
            text-align: center;
            font-size: 35px;
            color: lawngreen;

            background-color:grey;
        }
       #time
       {
            font-size: 4rem;
            color:gold;
       }
       #date
       {
            font-size: 5rem;
            color:blueviolet;
       }
       main{
           width: 600px;
           height: 220px;
           background-color: paleturquoise;
           border: 1px solid greenyellow;
           box-shadow: 2px 4px black;
       }
    </style>
</head>
<body>
    <main>
        <div id="time">14:30:42</div>
        <div id="date">2017年2月6日 周一</div>
    </main>
    <script>
        // 定义函数update，该函数的主要功能是获取当前时间，并且将获取的时间显示在页面上。
        function update()
        {
            // 获取当前日期时间对象
            // new 表示创建一个新对象
            var now = new Date();
            console.log(now);

            // 分别获取 时/分/秒
            var hour = now.getHours(); //0~23 
            console.log(hour);
            var minutes = now.getMinutes(); //0~59
            console.log(minutes);
            var seconds = now.getSeconds(); //0~59
            console.log(seconds);

            // 如果获取的时、分、秒是小于 10 的，那么应该在这个值前面 添加一个‘0’
            if(hour < 10)
            {
                hour = "0" + hour;
            }
            if(minutes < 10)
            {
                minutes = "0" + minutes;
            }
            if(seconds < 10)
            {
                seconds = "0" + seconds;
            }

            // 将时、分、秒拼接在一起，显示在第一个div所在的位置，且修改第一个div中的文本内容。
            var timeStr = hour + ":" + minutes + ":" + seconds;
            console.log(timeStr);

            // 根据 id 找到 第一个div
            var timeDiv = document.getElementById("time")
            // 修改div中的文本内容
            timeDiv.innerText = timeStr;

            // 获取当前的年、月、日
            var year = now.getFullYear();
            var month = now.getMonth() + 1;  // 0~11
            var date = now.getDate();
            
            var week = now.getDay() ; // 0~6 (0表示的是周日)
            if(week == 0)
            {
                week = "周日";
            }
            if (week == 1)
            {
                week = "周一";
            }
            if(week == 2)
            {
                week = "周二";
            }
            if (week == 3)
            {
                week = "周三";
            }
            if(week == 4)
            {
                week = "周四";
            }
            if (week == 5)
            {
                week = "周五";
            }if(week == 6)
            {
                week = "周六";
            }

            // 将获取到的年、月、日和周几 拼接到一起
           var  dateStr = year + "/" + month + "/" + date + " " + week;
           console.log(dateStr);

            //找到第二个 div    
           var dateDiv = document.getElementById("date");
            //改变div文本内容    
           dateDiv.innerText = dateStr;
           console.log(dateStr);
        }
        update();

        // 每间隔一秒钟，就要调用一次 update 函数，让时间持续更新
        // 1秒 = 1000毫秒
        setInterval(update,1000);

    </script>
</body>
</html>